<template>
	<view class="contact-detail-bg">

		<!-- 信息卡片 -->
		<view class="card">
			<view class="avatar-box">
				<image class="avatar" :src="detail.avatar || 'https://cdn-icons-png.flaticon.com/512/4140/4140048.png'" mode="aspectFill" />
			</view>
			<view class="info-row">
				<text class="label">Department</text>
				<text class="value">{{detail.department}}</text>
			</view>
			<view class="info-row">
				<text class="label">First name</text>
				<text class="value">{{detail.first_name}}</text>
			</view>
			<view class="info-row">
				<text class="label">Last name</text>
				<text class="value">{{detail.last_name}}</text>
			</view>
			<view class="info-row">
				<text class="label">Category</text>
				<text class="value">{{detail.company_name}}</text>
			</view>
			<view class="info-row">
				<text class="label">Title</text>
				<text class="value">{{detail.title	}}</text>
			</view>
			<view class="info-row">
				<text class="label">Email address</text>
				<text class="value">{{detail.email}}</text>
				<image v-if="detail.email" class="icon-btn" src="https://img.icons8.com/ios-glyphs/30/00b386/copy.png" mode="aspectFit" @click="copyEmail" />
			</view>
			<view class="info-row">
				<text class="label">Phone number</text>
				<text class="value">{{detail.phone}}</text>
				<image v-if="detail.phone" class="icon-btn" src="https://img.icons8.com/ios-glyphs/30/00b386/phone.png" mode="aspectFit" @click="callPhone" />
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'pinia'
import { getUserInfo1 } from '@/api/login'
import { useCounterStore } from '@/store/counter'
export default {
	data() {
		return {
			id: '',
			detail: {}
		}
	},
	computed: {
		...mapState(useCounterStore, ['item']),
	},
	onLoad({ id }) {
    if (id) {
      this.id = id;
      this.getData();
    }
  },
	methods: {
		goBack() {
			uni.navigateBack();
		},
		async getData(){
			let res = await getUserInfo1({user_id:this.id})
			this.detail = res
			console.log(res, 'getUserInfo1')
		},
		copyEmail() {
			uni.setClipboardData({
				data: '1311669602@qq.com',
				success: () => {
					uni.showToast({ title: 'Email copied', icon: 'success' })
				}
			})
		},
		callPhone() {
			uni.makePhoneCall({
				phoneNumber: this.item.phone
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.contact-detail-bg {
	min-height: 100vh;
	background: #f7f9fb;
	padding: 15px 16px 0 16px;

}
.nav-bar {
	display: flex;
	align-items: center;
	height: 56px;
	background: #fff;
	padding: 0 0 0 16px;
	.back-btn {
		width: 36px;
		height: 36px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: #e9f9f3;
		margin-right: 10px;
		.back-icon {
			width: 22px;
			height: 22px;
		}
	}
	.nav-title {
		flex: 1;
		text-align: center;
		font-size: 22px;
		font-weight: bold;
		color: #222;
		margin-right: 36px;
	}
}
.card {
	background: #fff;
	border-radius: 20px;
	padding: 20px 0 10px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	.avatar-box {
		width: 110px;
		height: 110px;
		border-radius: 20px;
		background: #e9eefd;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 18px;
		.avatar {
			width: 90px;
			height: 90px;
			border-radius: 16px;
			background: #fff;
		}
	}
	.info-row {
		width: 90%;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #f0f2f5;
		padding: 18px 0 8px 0;
		position: relative;
		.label {
			color: #7a8fa6;
			font-size: 15px;
			width: 120px;
			flex-shrink: 0;
		}
		.value {
			color: #222;
			font-size: 15px;
			flex: 1;
			margin-left: 10px;
		}
		.icon-btn {
			width: 22px;
			height: 22px;
			margin-left: 8px;
		}
	}
	.info-row:last-child {
		border-bottom: none;
	}
}
</style>